﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EmoticonPicker.ascx.cs" Inherits="UserInterface.UserControls.EmoticonPicker" %>
<%@ Import Namespace="UserInterface.Misc" %>

<div id="emoticon-container"></div>

<div id="emoticon-options">
    <div id="previous-emoticons" onclick="showPrevious();"><<</div>
    <div id="next-emoticons" onclick="showNext();">>></div>
</div>

<script type="text/javascript">
    var bbcode = null;

    function Emoticon(code, name, image)
    {
        var self = this;
        this.code = code;
        this.name = name;
        this.image = image;
        
        // Div
        this.getDiv = function()
        {
            div = document.createElement('div');
            div.className = 'emoticon-item';
            img = document.createElement('img');
            img.src = 'Emoticons/' + this.image;
            img.alt = this.name;
            img.border = '0';

            div.onclick = function()
            {
                if (bbcode != null)
                {
                    bbcode.addEmoticon(self.code);
                }
            }

            div.appendChild(img);

            return div;
        }
    }

    var emoticonContainer = document.getElementById('emoticon-container');
    var firstEmoticon = 0;
    var pageSize = 20;
    var emoticonArray = [];
    
    function bindData(from, to)
    {
        for (var i = from; i <= to; i++)
        {
            if (i < emoticonArray.length)
            {
                emoticonContainer.appendChild(emoticonArray[i].getDiv());
            }
        }
    }

    function cleanUp()
    {
        while (emoticonContainer.hasChildNodes())
        {
            emoticonContainer.removeChild(emoticonContainer.firstChild);
        }
    }

    function showPrevious()
    {
        if (firstEmoticon > 0)
        {
            cleanUp();
            firstEmoticon -= pageSize;
            bindData(firstEmoticon, firstEmoticon + (pageSize - 1));
        }
    }

    function showNext()
    {
        if (firstEmoticon + (pageSize - 1) < emoticonArray.length)
        {
            cleanUp();
            firstEmoticon += pageSize;
            bindData(firstEmoticon, firstEmoticon + (pageSize - 1));
        }
    }

    var emoticon;
    <asp:Repeater ID="EmoticonsRepeater" runat="server">
        <ItemTemplate>
            emoticon = new Emoticon(
                                    '<%# OutputTools.JSEscape((string)Eval("code")) %>',
                                    '<%# OutputTools.JSEscape((string)Eval("name")) %>',
                                    '<%# OutputTools.JSEscape((string)Eval("image")) %>'
                                    );
            
            emoticonArray.push(emoticon);
        </ItemTemplate>
    </asp:Repeater>

    bindData(firstEmoticon, pageSize - 1);
</script>